<template>
  <view class="container">
    <view class="no-data" v-if="!spec_data.length">暂无属性</view>
    <view v-else>
      <LyTree
        ref="specTree"
        @deldata="delData"
        @edit="editData"
        :isHandel="true"
        :tree-data="spec_data"
        node-key="id"
      ></LyTree>
    </view>
    <u-button
      type="primary"
      shape="circle"
      :custom-style="{
        margin: '48rpx 0 0 0',
        width: '90%',
        alignSelf: 'center',
        fontSize: '32rpx',
        fontWeight: 'bold',
      }"
      @click="addHandel"
      v-if="$accessCheck && $accessCheck($Access.specManageAdd)"
      class="spec-add-button"
    >
      <u-icon name="plus" size="32"></u-icon>
      新增属性
    </u-button>
  </view>
</template>

<script>
import LyTree from "@/components/ly-tree/ly-tree.vue";
export default {
  components: {
    LyTree,
  },
  data() {
    return {
      spec_data: [],
    };
  },
  onShow() {
    this.getSpecList();
  },
  methods: {
    addHandel() {
      uni.showModal({
        title: "您要新增?",
        confirmText: "属性值",
        confirmColor: "#fb5904",
        cancelText: "属性名",
        cancelColor: "#fb5904",
        success: (res) => {
          if (res.confirm) {
            this.goPage("/pagesB/goods/SpecManageAdd?type=2");
          } else if (res.cancel) {
            this.goPage("/pagesB/goods/SpecManageAdd?type=1");
          }
        },
      });
    },
    editData(item) {
      console.log(item);
      this.goPage(
        `/pagesB/goods/SpecManageAdd?id=${item.key}&type=${item.pid ? 2 : 1}`
      );
    },
    delData(item) {
      uni.showModal({
        title: "提示",
        content: "确定要删除吗？",
        success: async (res) => {
          if (res.confirm) {
            uni.showLoading();
            const { errorcode } = await this.$u.api.SpecManagedel(item.key);
            uni.hideLoading();
            if (errorcode !== 0) return;
            this.$u.toast("删除成功");
            this.getSpecList();
          }
        },
      });
    },
    async getSpecList() {
      this.spec_data = [];
      const { err, data } = await this.$u.api.SpecManagegetAll({
        page: 1,
        pageSize: 100,
      });
      if (err) return;
      this.$nextTick(() => {
        this.spec_data = (data || []).map((item) => ({
          ...item,
          children: item.child
            ? item.child.map((itemC) => ({
                ...itemC,
                label: itemC.specName,
              }))
            : [],
          label: item.specName,
        }));
      });
    },
  },
};
</script>

<style lang="scss">
.container {
  background: #fff;
  min-height: 100vh;
  padding: 0 32rpx 32rpx 32rpx;
  display: flex;
  flex-direction: column;
  .no-data {
    text-align: center;
    padding: 120rpx 0 40rpx 0;
    color: #bbb;
    font-size: 30rpx;
    letter-spacing: 2rpx;
  }
  .u-button {
    margin-top: 48rpx;
  }
}
</style>
